import {ScrollView, View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext} from 'react'
import {useDidHide, useDidShow, useUnload} from '@tarojs/taro'
import WarningRaw from './components'
import {AllWarningStore} from './model'
import {DatePickerRow} from '@/components/date'
import DevPicker from '@/components/picker/devPicker'

const AllWarning: React.FC = (): JSX.Element => {
  const {
    getPageData,
    warningList,
    changeDateRange,
    canUpDate,
    addPage,
    initPageData,
    setCurrentDev,
    currentDev
  } = useContext(AllWarningStore)

  // 可以使用所有的 React Hooks
  // useEffect(() => {
  //   console.log('Warning useEffect')
  // })

  // 对应 onShow
  useDidShow(() => {
    console.log('Warning useDidShow')
    //获取路由
  })

  // 对应 onHide
  useDidHide(() => {
    console.log('Warning useDidHide')
  })
  useUnload(() => {
    initPageData()
  })
  return (
    <View className="h-screen bg-xx_bg pt-12 overflow-y-auto flex flex-col">
      <View className="mb-14 h-42">
        <DevPicker onChange={setCurrentDev}></DevPicker>
      </View>

      <DatePickerRow changeDateRange={changeDateRange}></DatePickerRow>

      <ScrollView
        className="flex-1 overflow-y-auto pb-24"
        scrollY={true}
        lower-threshold="200"
        onScrollToLower={() => {
          canUpDate &&
            addPage(() => {
              getPageData()
            })
        }}
      >
        {warningList.map(item => (
          <WarningRaw warning={item}></WarningRaw>
        ))}

        {currentDev ? (
          canUpDate && !warningList.length ? (
            <View className="text-12 px-16 my-12 text-center">
              暂无报警信息~
            </View>
          ) : null
        ) : (
          <View className="text-12 px-16 my-12 text-center">请先选择设备~</View>
        )}
      </ScrollView>
    </View>
  )
}
export default observer(AllWarning)
